<script setup lang='ts'>
import type { PlusColumn } from 'plus-pro-components'

import { useGetSupplierDetail } from '@fl/api/supplier'
import { cloneDeep } from 'lodash-es'

const id = defineModel<string>('id', { required: true })
const visible = defineModel<boolean>('visible', { required: true })

const initialState = {} as any
const state = ref(cloneDeep(initialState))

const { data: supplierDetailData, isLoading: isGetSupplierDetailLoading } = useGetSupplierDetail(id)

// #region Form
const isFormLoading = computed(() => isGetSupplierDetailLoading.value)

const columns: PlusColumn[] = [
    {
        colProps: {
            span: 12,
        },
        label: '企业名称',
        prop: 'enterpriseName',
        valueType: 'text',
    },
    {
        colProps: {
            span: 12,
        },
        label: '经营状态',
        prop: 'businessStatus',
        valueType: 'text',
    },
    {
        colProps: {
            span: 12,
        },
        label: '成立日期',
        prop: 'establishmenDate',
        valueType: 'text',
    },
    {
        colProps: {
            span: 12,
        },
        label: '注册资本',
        prop: 'registeredCapital',
        valueType: 'text',
    },
    {
        colProps: {
            span: 12,
        },
        label: '统一社会信用代码',
        prop: 'unifiedSocialCreditCode',
        valueType: 'text',
    },
    {
        colProps: {
            span: 12,
        },
        label: '营业期限',
        prop: 'businessPeriod',
        valueType: 'text',
    },
    {
        colProps: {
            span: 12,
        },
        label: '法人代表',
        prop: 'legalRepresentative',
        valueType: 'text',
    },
    {
        colProps: {
            span: 12,
        },
        label: '注册地址',
        prop: 'contactAddress',
        valueType: 'text',
    },
    {
        colProps: {
            span: 12,
        },
        label: '注册号',
        prop: 'businessRegistrationNumber',
        valueType: 'text',
    },
    {
        colProps: {
            span: 12,
        },
        label: '登记机关',
        prop: 'registrationUthority',
        valueType: 'text',
    },
]
// #endregion

// #region UI Listener
function closed() {
    id.value = ''
}
// #endregion

watchEffect(() => {
    if (supplierDetailData.value) {
        state.value = cloneDeep(supplierDetailData.value)
    }
})
</script>

<template>
    <PlusDialog v-model="visible"
                :title="state.enterpriseName"
                width="800"
                :has-footer="false"
                close-on-press-escape
                @closed="closed"
    >
        <el-skeleton v-if="isFormLoading"
                     animated
        />

        <PlusForm v-else
                  v-model="state"
                  :columns="columns"
                  :label-width="140"
                  :has-footer="false"
                  :row-props="{ gutter: 40 }"
        />
    </PlusDialog>
</template>

<style lang="scss" scoped>
:deep(.el-form-item--default) {
    margin-bottom: 0;
}
</style>
